<template>
  <div class="reAll">
    <div class="record1" ref="record1W" :style="{ width: record1W ? record1W + 'px' : +'100%' }">
      <div class="btn-con left-btn" v-if="arrowFlag">
        <Button type="text" @click="handleScroll(440)">
          <Icon :size="30" type="ios-arrow-back" :color="'#C7C7CC'" />
        </Button>
      </div>
      <div class="btn-con right-btn" v-if="arrowFlag">
        <Button type="text" @click="handleScroll(-440)">
          <Icon :size="30" :color="'#C7C7CC'" type="ios-arrow-forward" />
        </Button>
      </div>

      <div ref="scrollOuter" class="scrollOuter">
        <div class="scrollBody" ref="scrollBody" :style="{ left: tagBodyLeft + 'px' }">
          <div v-for="(item, index) in topRocerd[fromType]" :key="index" class="reItem">
            <p
              v-if="
                (item.key === 'privacyPhoneCustomer' && topRocerdData['privacyPhoneCustomer'] == 0) ||
                item.hideItem
                  ? false
                  : true
              "
              :class="{
                curr: topRocerdActive == index,
                curr2: item.key == 'waitAllocateClueCustomer' && topRocerdData.waitAllocateClueCustomer > 0
              }"
              @click="topRocerdClick(item, index)">
              <span>{{ topRocerdData[item.key] || 0 }}</span>
              <em>{{ item.numText }}</em>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="clickInfo" v-if="topClickMsg">
      <span class="leftIcon">i</span>
      <span v-if="show1">
        以下客户为“隐私号客户”，只可由“承接人”进行跟进。
        <Poptip trigger="hover" content="“承接人”指已配置虚拟号的顾问" placement="top">
          <span class="clueStyle">什么是“承接人”？</span>
        </Poptip>
      </span>
      <span v-if="show2">
        以下人员已离案，您可将客户分配至其他跟进人。
        <span class="clueStyle" @click="goDivide">立即分配</span>
      </span>
      <span v-if="show3">
        以下客户已被设置为“无效”，您可将客户分配至其他跟进人。
        <span class="clueStyle" @click="goDivide">立即分配</span>
      </span>
      <span v-if="show4">以下客户已被案场其他顾问转到访，当前顾问客户已失效</span>
      <span v-if="show5">
        当前案场共有{{ topRocerdData['visitedCustomer'] || 0 }}客户已转到访，其中{{
          topRocerdData['visitedCLueCustomer'] || 0
        }}个为线索转到访。
        <span class="clueStyle" @click="goAllRecords">点击查看所有转到访记录</span>
      </span>
      <span v-if="show6">以下客户由线索客户转为到访客户</span>
      <span v-if="show7">
        以下人员已离案，请尽快将成交客户分配至其他跟进人。
        <span class="clueStyle" @click="goDivide">立即分配</span>
      </span>
      <span v-if="show8">以下客户最近半年除访问当前案场同时也访问了其他案场</span>
      <span v-if="show9">以下客户在当前案场有多个顾问同时跟进</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DtManagementCustomTopList',
    data() {
      return {
        record1W: 0,
        arrowFlag: true,
        tagBodyLeft: 0,
        clickKey: '',
        topClickMsg: false,
        topRocerdActive: null,
        topRocerd: {
          allCustomer: [
            { key: 'allClueCustomer', numText: '全部客户', queryType: null },
            { key: 'attentionCustomer', numText: '我的关注', queryType: 2 },
            { key: 'privacyPhoneCustomer', numText: '隐私号客户', queryType: 3 },
            { key: 'leaveCaseCustomer', numText: '离案人员客户', queryType: 4 },
            { key: 'invalidCustomer', numText: '无效客户', queryType: 5 },
            { key: 'multipleCustomer', numText: '访问多案场', queryType: 14 },
            { key: 'clueToVisitedCustomer', numText: '线索转到访', queryType: 11 },
            { key: 'notBindingWeChatCustomer', numText: '未绑微信号', queryType: 9 },
            { key: 'bindingWeChatCustomer', numText: '已绑微信号', queryType: 10 },
            { key: 'overdueCustomer', numText: '即将过期客户', hideItem: true, queryType: 17 },
            { key: 'soonOverdueCustomer', numText: '过期客户', hideItem: true, queryType: 18 }
          ],
          clueCustomer: [
            { key: 'allClueCustomer', numText: '全部客户', queryType: null },
            {
              key: 'waitAllocateClueCustomer',
              numText: '待分配客户',
              queryType: 1
            },
            { key: 'attentionCustomer', numText: '我的关注', queryType: 2 },
            { key: 'privacyPhoneCustomer', numText: '隐私号客户', queryType: 3 },
            {
              key: 'leaveCaseCustomer',
              numText: '离案人员客户',
              queryType: 4
            },
            { key: 'invalidCustomer', numText: '无效客户', queryType: 5 },
            {
              key: 'loseEfficacyCustomer',
              numText: '失效客户',
              queryType: 6
            },
            {
              key: 'multipleCustomer',
              numText: '访问多案场',
              queryType: 14
            },
            {
              key: 'multiPersonFollowUpCustomer',
              numText: '多人跟进',
              queryType: 15
            },

            { key: 'notVisitedCustomer', numText: '未转到访', queryType: 7 },
            { key: 'visitedCustomer', numText: '已转到访', queryType: 8 },
            { key: 'notBindingWeChatCustomer', numText: '未绑微信号', queryType: 9 },
            {
              key: 'bindingWeChatCustomer',
              numText: '已绑微信号',
              queryType: 10
            }
          ],
          publicClue: [
            { key: 'allClueCustomer', numText: '全部客户', queryType: null },
            { key: 'leaveCaseCustomer', numText: '离案人员客户', queryType: 4 },
            { key: 'invalidCustomer', numText: '无效客户', queryType: 5 },
            { key: 'privacyPhoneCustomer', numText: '隐私号客户', queryType: 3 }
          ],
          publicVisit: [
            { key: 'allClueCustomer', numText: '全部客户', queryType: null },
            { key: 'leaveCaseVisitCustomer', numText: '离案人员到访客户', queryType: 12 },
            { key: 'leaveCaseDealCustomer', numText: '离案人员成交客户', queryType: 13 },
            { key: 'invalidCustomer', numText: '无效客户', queryType: 5 },
            { key: 'overdueCustomerSum', numText: '过期客户', queryType: 16 },
            { key: 'privacyPhoneCustomer', numText: '隐私号客户', queryType: 3 }
          ],
          clueTarget: [
            { key: 'whole', numText: '全部', queryType: null },
            { key: 'isSet', numText: '已锁定', queryType: 12 },
            { key: 'notSet', numText: '未设定', queryType: 13 },
            { key: 'nextMonthSet', numText: '下月已设定', queryType: 5 }
          ],
          customerBig: [
            { key: 'total', numText: '全部', queryType: 0 },
            { key: 'phoneCount', numText: '手机号客户', queryType: 1 },
            { key: 'weChatCount', numText: '微信号客户', queryType: 2 },
            { key: 'multiBuildingCount', numText: '访问多案场客户', queryType: 3 },
            { key: 'multiUserCount', numText: '同案场多人跟进客户', queryType: 4 }
          ],
          caseRate: [
            { key: 'count', numText: '全部', queryType: '' },
            { key: 'aCount', numText: 'A级', queryType: 'A' },
            { key: 'bCount', numText: 'B级', queryType: 'B' },
            { key: 'cCount', numText: 'C级', queryType: 'C' },
            { key: 'dCount', numText: 'D级', queryType: 'D' }
          ],
          targetCount: [
            { key: 'classify0', numText: '全部', queryType: '0' },
            { key: 'classify1', numText: '未设定', queryType: '1' },
            { key: 'classify2', numText: '已设定', queryType: '2' },
            { key: 'classify3', numText: '补设目标', queryType: '3' },
            { key: 'classify4', numText: '上调目标', queryType: '4' },
            { key: 'classify5', numText: '下调目标', queryType: '5' }
          ],
          advertisement: [
            { key: 'counselorCount', numText: '顾问端', queryType: 'COUNSELOR' },
            { key: 'housesCount', numText: '案场端', queryType: 'HOUSES' },
            { key: 'integratedCount', numText: '综管端', queryType: 'INTEGRATED' },
            { key: 'financeCount', numText: '财务端', queryType: 'FINANCE' },
            { key: 'personnelCount', numText: '人事端', queryType: 'PERSONNEL' },
            { key: 'otherCount', numText: '其他', queryType: 'OTHER' }
          ]
        },
        show1: false, // 隐私号客户  提示
        show2: false, // 离案人员客户  提示
        show3: false, // 无效客户  提示
        show4: false, // 失效客户  提示
        show5: false, // 已转到访客户  提示
        show6: false, // 到访客户 > 线索转到访  提示
        show7: false, // 公客池 > 离案人员成交客户  提示
        show8: false, // 访问多案场
        show9: false // 多人跟进
      }
    },
    props: {
      fromType: {
        type: String,
        require: true,
        default: 'clueCustomer'
      },
      showRight: {
        type: Boolean,
        default: true
      },
      topRocerdData: {
        type: Object,
        default: {}
      }
    },

    mounted() {
      if (
        this.fromType === 'clueTarget' ||
        this.fromType === 'customerBig' ||
        this.fromType === 'caseRate' ||
        this.fromType === 'targetCount' ||
        this.fromType === 'advertisement'
      ) {
        this.topRocerdActive = 0
      }
      this.handleArrow()
    },

    watch: {
      fromType(val) {
        if (val === 'publicClue' || val === 'publicVisit') {
          this.topRocerdActive = null
        }
      }
    },

    methods: {
      handleArrow() {
        this.$nextTick(() => {
          const outerWidth = this.$refs.scrollOuter.offsetWidth
          const bodyWidth = this.$refs.scrollBody.offsetWidth
          if (outerWidth < bodyWidth) {
            this.arrowFlag = true
          } else {
            this.arrowFlag = false
          }
        })
      },
      checkMultiple(num, width) {
        if (num % width === 0) {
          return num
        } else {
          return num - (num % width)
        }
      },
      handleScroll(offset) {
        const outerWidth = this.$refs.scrollOuter.offsetWidth
        const bodyWidth = this.$refs.scrollBody.offsetWidth

        if (offset > 0) {
          this.tagBodyLeft = Math.min(0, this.tagBodyLeft + offset)
        } else {
          if (outerWidth < bodyWidth) {
            this.arrowFlag = true
            if (this.tagBodyLeft < -(bodyWidth - outerWidth)) {
              this.tagBodyLeft = this.tagBodyLeft
            } else {
              this.tagBodyLeft = Math.max(this.tagBodyLeft + offset, outerWidth - bodyWidth) - 30
            }
          } else {
            this.tagBodyLeft = 0
            this.arrowFlag = false
          }
        }
      },
      // 点击统计
      topRocerdClick(data, index) {
        console.log(data, index, '555')
        const obj = Object.assign({}, data)
        this.closeAll()
        // 线索客户 || 到访客户
        if (this.fromType === 'clueCustomer' || this.fromType === 'allCustomer') {
          if (data.key === 'privacyPhoneCustomer') {
            this.topClickMsg = true
            this.show1 = true
          } else if (data.key === 'leaveCaseCustomer') {
            this.topClickMsg = true
            this.show2 = true
          } else if (data.key === 'invalidCustomer') {
            this.topClickMsg = true
            this.show3 = true
          } else if (data.key === 'loseEfficacyCustomer') {
            this.topClickMsg = true
            this.show4 = true
          } else if (data.key === 'visitedCustomer') {
            this.topClickMsg = true
            this.show5 = true
          } else if (data.key === 'clueToVisitedCustomer') {
            this.topClickMsg = true
            this.show6 = true
          } else if (data.key === 'multipleCustomer') {
            this.topClickMsg = true
            this.show8 = true
          } else if (data.key === 'multiPersonFollowUpCustomer') {
            this.topClickMsg = true
            this.show9 = true
          } else {
            this.topClickMsg = false
          }
        }
        // 公客池
        if (this.fromType === 'publicClue' || this.fromType === 'publicVisit') {
          if (data.key === 'leaveCaseCustomer') {
            this.topClickMsg = true
            this.show2 = true
          } else if (data.key === 'invalidCustomer') {
            this.topClickMsg = true
            this.show3 = true
          } else if (data.key === 'privacyPhoneCustomer') {
            this.topClickMsg = true
            this.show1 = true
          } else if (data.key === 'leaveCaseDealCustomer') {
            this.topClickMsg = true
            this.show7 = true
          } else {
            this.topClickMsg = false
          }
        }
        if (this.topRocerdActive == index) {
          if (this.fromType != 'targetCount') {
            this.topRocerdActive = null
            this.clickKey = ''
            this.topClickMsg = false
            obj.queryType = null
          }
        } else {
          obj.queryType = data.queryType
          this.clickKey = data.key
          this.topRocerdActive = index
        }
        this.$emit('getClickData', obj)
      },
      // 关闭所有筛选项
      closeAll() {
        this.show1 = false
        this.show2 = false
        this.show3 = false
        this.show4 = false
        this.show5 = false
        this.show6 = false
        this.show7 = false
        this.show8 = false
        this.show9 = false
      },
      // 跳转到 分配客户
      goDivide() {
        this.$router.push({
          path:
            this.fromType === 'allCustomer'
              ? '/allCustomersManagement/visitAssign'
              : this.fromType === 'clueCustomer'
              ? '/allCustomersManagement/clueAssign'
              : '/allCustomersManagement/publicAssign',
          query: {
            fromPage: this.fromType,
            fromKey: this.clickKey
          }
        })
      },
      // 跳转到 线索客户转到访记录
      goAllRecords() {
        this.$router.push({
          path: '/allCustomersManagement/visitRecord',
          query: {
            fromPage: this.fromType,
            fromKey: this.clickKey
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .reAll {
    width: 90%;

    overflow: hidden;

    background: #fff;
    .record1 {
      position: relative;
      width: 100%;
      // height: 100%;
      min-height: 80px;
      padding: 0 22px;
      .scrollOuter {
        position: absolute;
        left: 40px;
        top: 0;
        bottom: 0;
        width: calc(100% - 80px);
      }
      .scrollBody {
        position: absolute;
        overflow: visible;
        white-space: nowrap;
        transition: left 0.3s ease;
        background: #fff;
        .reItem {
          cursor: pointer;
          display: inline-block;
          white-space: normal;
          height: 64px;
          vertical-align: top;
          border-radius: 4px;
        }
        .reItem:hover {
          background: rgba(244, 244, 244, 1);
        }
      }
      p {
        min-width: 100px;

        text-align: center;
        text-align: center;
        height: 100%;
        border-radius: 4px;
        // padding-top: 8px;
        padding: 6px 10px 0;
        span {
          display: block;
          font-size: 20px;
          font-weight: bold;
          color: #000;
        }
        em {
          display: block;
          font-style: normal;
        }
      }
      p.curr2 {
        span {
          color: red;
          font-weight: bold;
        }
      }

      p.curr {
        color: #fff;
        background: #2d8cf0;
        span {
          color: #fff;
          font-weight: bold;
        }
      }
      // .right_btn {
      //   width: 58px;
      //   height: 58px;
      //   border: 1px solid #2d8cf0;
      //   border-radius: 4px;
      //   margin-left: 20px;
      //   color: #2d8cf0;
      //   box-sizing: border-box;
      //   line-height: 16px;
      //   padding: 0 12px;
      //   word-break: break-all;
      //   white-space: normal;
      //   display: flex;
      //   justify-content: center;
      //   align-items: center;
      // }

      .btn-con {
        position: absolute;
        top: 0px;
        height: 64px;
        width: 20px;

        background: rgba(228, 228, 228, 1);
        border-radius: 4px;
        z-index: 10;

        &.left-btn {
          position: absolute;

          left: 0;
          button {
            position: absolute;
            top: 16px;
            left: -22px;
          }
        }
        &.right-btn {
          position: absolute;
          right: 0;
          button {
            position: absolute;
            top: 16px;
            left: -20px;
          }
        }
        button:hover {
          background: none;
        }
      }
      .btn-con:hover {
        background: #eee;
      }
    }
    .clickInfo {
      position: relative;
      background-color: rgb(254, 252, 236);
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #000;
      display: flex;
      align-items: center;
      .leftIcon {
        display: inline-block;
        margin: 0 12px;
        background-color: rgb(15, 66, 167);
        color: #fff;
        border-radius: 50%;
        height: 16px;
        width: 16px;
        text-align: center;
        line-height: 16px;
      }
      ::v-deep .clueStyle {
        color: rgb(15, 66, 167) !important;
        cursor: pointer;
      }
    }
  }
</style>
